<template>
	<view>
		<!-- 头部 -->
		<view class="box_top">
			<!-- title -->
			<view class="top_title">
				<text>房市介</text>
			</view>

			<!-- 搜索栏 -->
			<view class="searchbar">
				<!-- 地址 -->
				<view class="">
					<text> {{vuex_city==''?'选择':vuex_city}}</text>
				</view>

				<!-- 搜索条 -->
				<uni-search-bar placeholder="上高印象二手房" cancel-text="取消" style="padding: 0;" bgColor="#fff" @focus="search">
					<!-- <uni-icons slot="searchIcon" color="#999999" size="14" type="home" /> -->
				</uni-search-bar>

				<!-- <u-icon name="scan" color="#2979ff" size="40"  @click="clickScan" style="margin-left: auto;"></u-icon> -->
			</view>

		</view>
		
		<!-- banner -->
		<view class="box_banner">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view style="width: 100%; height: 100%; border-radius: 16rpx;">
							<image :src="item.url" mode="" style="width: 100%; height: 100%;border-radius: 40rpx;">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		
		</view>

		<!-- 菜单导航 -->
		<view class="category-list">
			<view class="category" v-for="(row, index) in navList" :key="index" @tap="clickNav(row)">
				<view class="img">
					<image :src="row.img"></image>
				</view>
				<view class="text">{{ row.name }}</view>
			</view>
		</view>

		<!-- 推荐商品 -->
		<view class="container">
			<view class="left">
				<view class="price-info">
					<text class="label">行情播报</text>
					<swiper style="height: 196rpx;" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="150" :circular="true"
						:current="swiperCurrent2" @change="changeSwiper2">
						<swiper-item v-for="(v,k) in statisticsData" :key="k" :class="{active:k==swiperCurrent2}">
							<text class="price" v-if="k===0">{{v[0].split("#")[0]}}万</text>
							<text class="price" v-if="k===1">{{v[0].split("#")[0]}}元</text>
							<text class="change">与上日 {{v[0].split("#")[1]}}</text>
						</swiper-item>
					</swiper>

				</view>
				
				<view class="price-info price-info_bule">
					<text class="label" >新上二手房房源</text>

					<swiper style="height: 144rpx;" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="150" :circular="true"
						:current="swiperCurrent2" @change="changeSwiper2">
						<swiper-item v-for="(v,k) in statisticsData" :key="k" :class="{active:k==swiperCurrent2}">
							
							<text class="number">{{v[1].split("#")[0]}} 套</text>
							<text class="change up">与上日 {{v[1].split("#")[1]}}</text>
						</swiper-item>
					</swiper>
				
				</view>
				

			</view>


			<!--上高印象急售 6000 元/m²-->
			<view class="right" v-if="adv.length > 0">
				<text class="label">优房推荐</text>
				<view class="price-info2">
					<swiper :indicator-dots="false" :autoplay="true" :interval="5000" :duration="150" class="swiper"
						:circular="true" :current="swiperCurrent" @change="changeSwiper">
						<swiper-item v-for="(v,k) in recommendList" :key="k" :class="{active:k==swiperCurrent}">
							<image :src="v.faceUrl" class="bg" mode="aspectFill" @click="navigatorTo(v.id)" />
						</swiper-item>
					</swiper>
					<view class="dots">
						<block v-for="(v,k) in adv.length" :key="k">
							<view class="dot" :class="k==swiperCurrent ? ' active' : ''"></view>
						</block>
					</view>
				</view>
				<view class="new-listings2">
					<!--            <text class="change up" v-if="recommendList[swiperCurrent].type===4">{{recommendList[swiperCurrent].villageName}} 急售 {{recommendList[swiperCurrent].price}} 元/m2</text>-->
					<!--            <text class="change up" v-else>{{recommendList[swiperCurrent].villageName}} 出租 {{recommendList[swiperCurrent].price}} 元/月</text>-->

					<text class="change up"
						v-if="recommendList.length > swiperCurrent && recommendList[swiperCurrent].type === 4">{{recommendList[swiperCurrent].villageName}}
						急售 {{recommendList[swiperCurrent].price}} 元/m2</text>
					<text class="change up"
						v-else-if="recommendList.length > swiperCurrent">{{recommendList[swiperCurrent].villageName}}
						出租 {{recommendList[swiperCurrent].price}} 元/月</text>
				</view>


			</view>
		</view>


		<!-- 分类列表 -->
		<scroll-view scroll-x class="classify-list" :class="{ 'fixed': isFixed }">
			<view class="list" v-for="(item, index) in classList" :class="{ action: classifyShow == index }"
				@click="onClassify(item.id, index)" :key="index">
				<text>{{ item.name }}</text>
				<text class="line" v-show="classifyShow == index"></text>
			</view>
		</scroll-view>

    <!-- 二手房或租房 -->
    <fangTemplate  style="width: 100%;" :res='flowList' :storeName='false'  v-if="type===30 || type===100"/>

    <!-- 家居家电建材等商品 -->
    <goodsTemplate  style="width: 100%;" :res='goodsList' :storeName='false'  v-else-if="type===40 || type===50  || type===60 || type===70" />

    <!-- 楼盘列表 -->
    <buildTemplate  style="width: 100%;" :res='buildingList' :storeName='false'  v-else-if="type===20"/>

  </view>
</template>

<script>
	import {
		findHouseRoomList,
		findHouseListRecommend,
		statistics
	} from "../../api/house";
	import {
		getAllBuildings
	} from "@/api/building"
	import {
		bingUserInvitationCode
	} from "@/api/login"

	import {
		getGoodsList,
		getGoodsSkuList
	} from "@/api/goods.js";
	import config from "@/config/config";
	import goodsTemplate from '@/components/m-goods-list/list'
	import buildTemplate from '@/components/m-goods-list/buildList'
	import fangTemplate from '@/components/m-goods-list/fangList'

	import uniMap from "@/components/uniMap";
	import city from "@/components/m-city/m-city.vue";
	import permision from "@/js_sdk/wa-permission/permission.js";
	import storage from "@/utils/storage.js";
	import {
		saveUserAddress
	} from "@/api/members"
	export default {
		data() {
			return {
				swiperCurrent: 0,
				swiperCurrent2: 0,
				adv: [{
						image: 'https://ffangshijie.oss-cn-beijing.aliyuncs.com/2821e50462ab4197bd28bb4fcd5d333c.jpg'
					},
					{
						image: 'https://ffangshijie.oss-cn-beijing.aliyuncs.com/47e46bb59b804fa09152876f90d3c854.jpg'
					},
					{
						image: 'https://fangshijie2025.oss-cn-hangzhou.aliyuncs.com/fb9385aa92534ce7acdbaad29efb33ad.jpeg'
					}
				],
				hasMoreMap: {},
				mapFlag: false,
				goodsList: [],
				cachedGoodsList: {},
				paramsMap: {},
				vuex_city: '',
				keyword: '',
				type: 70,//默认推荐
				scrollTop: 0,
				houseList: [],
				noticeList: [],
				slideNum: 0,
				navList: [{
						id: 2,
						name: '新房',
						url: '/pages/house/newHouse',
						img: '/static/nav/group1.png'
					},
					{
						id: 3,
						name: '二手房',
						url: '/pages/house/oldHouse',
						img: '/static/nav/group2.png'
					},
					{
						id: 4,
						name: '租房',
						url: '/pages/tabbar/color/homeZu',
						img: '/static/nav/group3.png'
					},
					{
						id: 5,
						name: '建材',
						url: '/pages/tabbar/color/jiancai',
						img: '/static/nav/group4.png'
					},
					{
						id: 6,
						name: '经纪人',
						url: '/pages/tabbar/broker/index',
						img: '/static/nav/group5.png'
					},
					{
						id: 7,
						name: '水到家',
						url: '/pages/tabbar/waterhome/index',
						img: '/static/nav/group6.png'
					},
					{
						id: 8,
						name: '优生活',
						url: '/pages/tabbar/exclife/index',
						img: '/static/nav/group7.png'
					},
					{
						id: 9,
						name: '家居',
						url: '/pages/tabbar/homefur/index',
						img: '/static/nav/group8.png'
					}
				],
				classifyShow: 0,
				classList: [
           {
            id: 70,
             name: '推荐'
           },{
						id: 20,
						name: '新房'
					},
					{
						id: 30,
						name: '二手房'
					},
					{
						id: 100,
						name: '租房'
					},
					{
					  id: 40,
					  name: '建材'
					},
					{
					  id: 50,
					  name: '优生活'
					},
					{
					  id: 60,
					  name: '家具家具'
					},

				],
				loadStatusMap: {},
				flowList: [],
				cachedFlowList: {},
				buildingList: [],
				cachedBuildingList: {},
				uvCode: uni.getStorageSync('uvCode'),
				isFixed: false, // 新增变量，用于控制分类列表是否固定
				classifyListTop: 0, // 新增变量，用于存储分类列表距离顶部的距离
				bannerImage: '',
				imageLoaded: false,
				recommendList: [],
				statisticsData: [],
				area: '',
				avgPrice: '',
				sort: '',
				startDate: '',
				endDate: '',

				info: [{
					content: '内容 A',
					url: '/static/nav/image99.png'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
			}
		},
		components: {
			goodsTemplate,
			buildTemplate,
			fangTemplate,
			"m-city": city,
			uniMap
		},
    mounted(){

      // if (this.$options.filters.tipsToLogin()) {
      //
      // }

    },
		onShow() {

			// 初始化每个分类的参数
			this.classList.forEach(item => {
				this.paramsMap[item.id] = {
					pageNumber: 1,
					pageSize: 10,
					keyword: "",
					storeCatId: "",
					storeId: "",
				};
				this.loadStatusMap[item.id] = 'loadmore';
				this.hasMoreMap[item.id] = true;
			});

			// 检查是否已选择城市，如果未选择，跳转到选择城市页面
			this.checkCity();

			// 获取数据
			// this.findHouseList(0);
			// this.getNoticecList();
			// 流量统计
			// this.appSysFlowInfo();
			// uni.$on('findBuildingList', (obj) => {
			// 	// 获取数据
			// 	this.findBuildingList()
			// })

      //默认显示推荐商品
			this.goodsList = []
			this.paramsMap[this.type].pageNumber = 1;
      this.paramsMap[this.type].categoryPath="1931160103593586690"
			this.getGoodsData();
			//this.findBuildingList()
			this.findHouseListRecommend();
			this.statisticsTemp();

			// 获取分类列表距离顶部的距离
			const query = uni.createSelectorQuery().in(this);
			query.select('.classify-list').boundingClientRect((rect) => {
				if (rect) {
					this.classifyListTop = rect.top;
				}
			}).exec();
		},
		onUnload() {
			// 移除监听事件
			uni.$off('findIndexHouseList');
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// 判断是否滚动到分类列表位置
			if (this.scrollTop >= this.classifyListTop) {
				this.isFixed = true;
			} else {
				this.isFixed = false;
			}
		},
		onReachBottom() {
			this.loadStatusMap[this.type] = 'loading';
			// 获取数据
			this.paramsMap[this.type].pageNumber++;

			if (this.type === 20) {
				this.findBuildingList();
			} else if (this.type === 30 || this.type === 100) {
				this.findHouseList()
			} else if (this.type === 40 || this.type === 50 || this.type === 60) {
				this.getGoodsData();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置页码
			this.paramsMap[this.type].pageNumber = 1;
			// 清空列表
			if (this.type === 20) {
				this.buildingList = [];
				this.cachedBuildingList[this.type] = [];
			} else if (this.type === 30 || this.type === 100) {
				this.flowList = [];
				this.cachedFlowList[this.type] = [];
			} else if (this.type === 40 || this.type === 50 || this.type === 60) {
				this.goodsList = [];
				this.cachedGoodsList[this.type] = [];
			}
			// 获取数据
			if (this.type === 20) {
				this.findBuildingList();
			} else if (this.type === 30 || this.type === 100) {
				this.findHouseList()
			} else if (this.type === 40 || this.type === 50 || this.type === 60) {
				this.getGoodsData();
			}
			// 关闭刷新
			uni.stopPullDownRefresh();
		},

		methods: {
			clickNav(item) { //item.url
				uni.navigateTo({
					url: item.url
				});

			},
			clickScan() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码成功，结果为：', res.result);
						// 在这里可以根据扫码结果进行相应的处理，例如跳转到指定页面
						if (res.result) {
							const id = res.result.split('id=')[1];
							//bingUserInvitationCode---绑定用户邀请码
							bingUserInvitationCode(id).then((res) => {
								console.info('扫码成功，结果为：', res)

							});
							// console.log('扫码成功，结果ID为：', id);
							// uni.showToast({
							//   title: id,
							//   icon: 'none',
							//   duration: 3000
							// });
							// 假设扫码结果是一个链接，跳转到该链接对应的页面
							// uni.navigateTo({
							//   url: `/pages/store/buildingDetail?id=31`
							// });
						}
					},
					fail: (err) => {
						console.error('扫码失败：', err);
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
			changeSwiper2(e) {
				this.swiperCurrent2 = e.detail.current;
			},
			// 关闭地图
			closeMap() {
				this.mapFlag = false;
			},
			// 打开地图并访问权限
			clickUniMap() {
				// #ifdef APP-PLUS
				if (plus.os.name == "iOS") {
					// ios系统
					permision.judgeIosPermission("location") ?
						(this.mapFlag = true) :
						this.refuseMap();
				} else {
					// 安卓
					this.requestAndroidPermission(
						"android.permission.ACCESS_FINE_LOCATION"
					);
				}
				// #endif

				// #ifndef APP-PLUS
				// this.mapFlag = true;
				// #endif
				console.info("打开地图")
				this.mapFlag = true;
			},

			// 如果拒绝权限 提示区设置
			refuseMap() {
				uni.showModal({
					title: "温馨提示",
					content: "您已拒绝定位,请开启",
					confirmText: "去设置",
					success(res) {
						if (res.confirm) {
							//打开授权设置
							// #ifndef MP-WEIXIN
							uni.getSystemInfo({
								success(res) {
									if (res.platform == "ios") {
										//IOS
										plus.runtime.openURL("app-settings://");
									} else if (res.platform == "android") {
										//安卓
										let main = plus.android.runtimeMainActivity();
										let Intent = plus.android.importClass(
											"android.content.Intent"
										);
										let mIntent = new Intent("android.settings.ACTION_SETTINGS");
										main.startActivity(mIntent);
									}
								},
							});
							// #endif
						}
					},
				});
			},

			// 获取安卓是否拥有地址权限
			async requestAndroidPermission(permisionID) {
				var result = await permision.requestAndroidPermission(permisionID);

				if (result == 1) {
					this.mapFlag = true;
				} else {
					this.refuseMap();
				}
			},

			// 选择地址后数据的回调
			callBackAddress(val) {
				console.log(val)
				// uni.showLoading({
				//   title: "加载中",
				// });

				if (val.regeocode && val) {
					console.info("获取安卓是否拥有地址权限---" + val.regeocode.addressComponent.district)
					this.vuex_city = val.regeocode.addressComponent.district
					uni.setStorageSync('address', val.regeocode.addressComponent);
					uni.hideLoading();
				}

				this.mapFlag = !this.mapFlag; //关闭地图
			},
			address() {
				var that = this
				uni.getLocation({
					type: 'gcj02', // 坐标类型，可选值为 'wgs84'、'gcj02'、'bd09ll'，其中 'gcj02' 为国测局坐标，通常用于在地图上显示
					success: function(res) {
						var latitude = res.latitude; // 纬度
						var longitude = res.longitude; // 经度
						var locationStr = longitude + ',' + latitude
						// 根据经纬度获取详细地址
						uni.request({
							url: `https://restapi.amap.com/v3/geocode/regeo`,
							method: "GET",
							data: {
								key: config.aMapKey, //web服务的key
								location: locationStr
							},
							success: ({
								data
							}) => {
								that.vuex_city = data.regeocode.addressComponent.district
								console.log("获取地址信息", data.regeocode.addressComponent)
								uni.setStorageSync('address', data.regeocode.addressComponent);
								// 记录用户最近的地址--saveUserAddress
								// saveUserAddress(data.regeocode.addressComponent).then((res) => {
								//   console.info('保存地址成功，结果为：', res)
								// });
							},
							fail: (err) => {
								console.log("获取地址信息error")
							},
						});
					},
					fail: function(res) {
						console.info("-----获取定位失败的处理逻辑----" + res)
						// 获取定位失败的处理逻辑
					}
				});
			},
			/**
			 * 分类点击
			 * @param {Object} item
			 * @param {Number} index
			 */
			onClassify(id, index) {
				this.classifyShow = index;

				this.paramsMap[id].pageNumber = 1;
				this.imageLoaded = false;
				this.bannerImage = '';
				this.type = id;
				if (id === 20) {
					this.buildingList = [];
					if (this.cachedBuildingList[id]) {
						this.buildingList = this.cachedBuildingList[id];
					} else {
						this.findBuildingList();
					}
				} else if (id === 30 || id === 100) {
					this.flowList = [];
					if (this.cachedFlowList[id]) {
						this.flowList = this.cachedFlowList[id];
					} else {
						this.findHouseList();
					}
				} else if (id === 40 || id === 50 || id === 60 || id === 70) {
           var  categoryPath="";
           if(id === 40){
             categoryPath="1931162420132851714"
           }else if(id === 50){
             categoryPath="1931160103593586690"
           }else if(id === 60){
             categoryPath="1931166183220457473"
           }else if(id === 70){
             categoryPath="1931160103593586690"
           }

					this.goodsList = [];
					if (this.cachedGoodsList[id]) {
						this.goodsList = this.cachedGoodsList[id];
					} else {
            this.paramsMap[id].categoryPath=categoryPath
            //categoryPath=1931162420132851714
						this.getGoodsData();
					}
				}
			},
			/**
			 * 菜单导航滚动
			 */
			ScrollMenu(e) {
				let scrollLeft = e.target.scrollLeft;
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.nav')
					.boundingClientRect(data => {
						let wid = e.target.scrollWidth - data.width - (data.left * 2 + 5);
						this.slideNum = ((scrollLeft / wid) * 300) / 2;
					})
					.exec();
			},
			checkCity() {
				// 检查是否已选择城市，如果未选择，跳转到选择城市页面
				var vuex_city = uni.getStorageSync("vuex_city");
				if (!vuex_city || vuex_city.length == 0) {
					// 没有token 则跳转到登录
					this.address();
					//return this.$u.route('/pages/house/location/location');
				} else {
					this.vuex_city = vuex_city;
				}
			},
			navigatorTo(id) {
				this.$u.route({
					url: '/pages/house/detail/detail?houseId=' + id
				});
			},
			search() {
        if (this.$options.filters.tipsToLogin()) {
          //跳转
          uni.navigateTo({
            url: `/pages/navigation/search/searchBuild`,
          });
        }


				// this.$u.route({
				//   url: '/pages/search/search',
				// })
			},
			notice() {
				// this.$u.route({
				//  url: 'pages/notice/notice'
				// })
			},
			//推荐
			getGoodsData() { //商品
				// #TODO
				//this.params.goodsType=this.type;
				getGoodsSkuList(this.paramsMap[this.type]).then(res => {
					if (res.data.success) {
						if (res.data.result.records.length > 0) {
							this.goodsList.push(...res.data.result.records);
							this.cachedGoodsList[this.type] = this.goodsList;
							this.hasMoreMap[this.type] = true;
							this.loadStatusMap[this.type] = 'loadmore';
						} else {
							this.hasMoreMap[this.type] = false;
							this.loadStatusMap[this.type] = 'nomore';
						}
					}
				})
			},
			statisticsTemp() {

				statistics().then(res => {
					if (res.data && res.data.code === 200 && Array.isArray(res.data.result)) {
						this.statisticsData = res.data.result;
					} else {
						this.statisticsData = [];
					}
				})
			},
			findBuildingList() { //楼盘
				this.paramsMap[this.type].state = 1
				getAllBuildings(this.paramsMap[this.type]).then(res => {
					if (res.statusCode === 200) {
						if (res.data.length > 0) {
							this.buildingList.push(...res.data);
							this.cachedBuildingList[this.type] = this.buildingList;
							this.hasMoreMap[this.type] = true;
							this.loadStatusMap[this.type] = 'loadmore';
						} else {
							this.hasMoreMap[this.type] = false;
							this.loadStatusMap[this.type] = 'nomore';
						}
					}
				})
			},
			parseImage(imageStr) {
				if (null == imageStr || '' == imageStr) {
					return '';
				}

				var images = JSON.parse(imageStr)
				return images[0]
			},
			//推荐
			findHouseListRecommend() {

				findHouseListRecommend({
					state: 2,
					villageCity: uni.getStorageSync("address").district,
					pageNumber: 1,
					pageSize: 10,
					orderByColumn: 'update_time,create_time',
					isAsc: 'desc',
					publicFlag: 'y'
				}).then((result) => {
					if (result.data && result.data.code === 200 && Array.isArray(result.data.rows)) {
						this.recommendList = result.data.rows;
					} else {
						this.recommendList = [];
					}
				})

			},
			findHouseList() { //房源
				console.log("findHouseList======" + this.paramsMap[this.type].pageNumber)
				findHouseRoomList({
					state: 2,
					villageCity: uni.getStorageSync("address").district,
					pageNumber: this.paramsMap[this.type].pageNumber,
					pageSize: this.paramsMap[this.type].pageSize,
					orderByColumn: 'update_time,create_time',
					type: this.type,
					isAsc: 'desc'
				}).then(res => {
					if (res.data.code === 200) {
						if (res.data.rows.length > 0) {
							this.flowList.push(...res.data.rows);
							this.cachedFlowList[this.type] = this.flowList;
							this.hasMoreMap[this.type] = true;
							this.loadStatusMap[this.type] = 'loadmore';
						} else {
							this.hasMoreMap[this.type] = false;
							this.loadStatusMap[this.type] = 'nomore';
						}
					}
				});
			},
			server() {
				// 处理客服图标点击事件，这里可以添加具体逻辑
				console.log('客服图标被点击');
			},
			onImageLoad() {
				this.imageLoaded = true;
			}
		}
	}
</script>



<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.box_top {
		width: auto;
		height: auto;
		padding: calc(20rpx + var(--status-bar-height)) 0 0 0%;
		height: calc(var(--status-bar-height) + 210rpx);
		background: linear-gradient(to bottom, #cfe2fe, #fff);
		position: sticky;
		top: 0;
		z-index: 20;
		padding-bottom: 20rpx;
		// border-bottom: 2rpx #d9d9d9 solid;
		box-shadow: 0 0 0 2rpx #d9d9d97a;

		.top_title {
			padding-top: 28rpx;
			font-size: 32rpx;
			font-weight: 600;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}

		.searchbar {
			width: 90%;
			margin: auto;
			margin-top: 24rpx;
			background-color: #FFF;
			display: flex;
			// justify-content: center;
			align-items: center;
			border-radius: 80rpx;
			padding: 0 24rpx;
		}

		
	}
	.box_banner {
		width: 90%;
		margin: auto;
		margin-top: 24rpx;
	}

	$base: #fe3b0f; // 基础颜色
	$assist-clor: #ff4e17; // 辅助颜色
	$change-clor: #fc603a; // 渐变色
	$floor-clor: #fafafa; // 底部颜色
	$price-clor: #ff0000; // 价格颜色

	// 新增变量定义
	$primary-color: #165DFF; // 主色调，深蓝色代表专业和信任
	$secondary-color: #FF7D00; // 辅助色，橙色代表活力
	$text-color: #333333; // 主要文字颜色
	$subtext-color: #666666; // 次要文字颜色
	$light-text-color: #999999; // 浅色文字
	$border-color: #E5E5E5; // 边框颜色
	$bg-color: #F5F7FA; // 背景颜色

	.nomore {
		background-color: $u-bg-color;
	}

	.search {
		width: 54px;
		height: 44px;

		&:active {
			background-color: $u-bg-color;
		}
	}

	.rowClass {
		border-radius: 8px;
		background-color: rgb(255, 255, 255);
		margin-top: 10rpx;
	}

	.hoverClass {
		background-color: #E4E7ED;
	}

	.tabName {
		margin-top: 80rpx;
		font-size: 28rpx;
		color: $u-main-color;
	}

	.demo-warter {
		border-radius: 8px;
		margin-top: 3px;
		background-color: #ffffff;
		padding: 3px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.item-cover {
		font-size: 55rpx;
		color: $u-type-warning;
	}

	.item-title {
		font-size: 28rpx;
		color: $u-main-color;
		font-weight: bold;
		padding-top: 5rpx;
		padding-left: 10rpx;
	}

	.item-price {
		font-weight: normal;
		font-size: 32rpx;
		color: $u-type-warning;
	}

	.item-desc {
		font-weight: normal;
		font-size: 26rpx;
		color: $u-tips-color;
		padding-bottom: 5rpx;
		padding-left: 10rpx;
	}

	.item-tag {
		font-size: 28rpx;
		color: $u-tips-color;
		margin-top: 3px;
	}

	.buttom {
		.loginType {
			font-size: 14px;
			position: fixed;
			right: 30rpx;
			bottom: 300rpx;
			width: 60px;
			height: 60px;
			padding: 4px;
			cursor: pointer;
			background: #FFF;
			text-align: center;
			line-height: 60px;
			border-radius: 100%;
			-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
		}
	}



	.container {
		display: flex;
		justify-content: space-between;
		padding: 10rpx; // 统一使用rpx单位
		background-color: $bg-color; // 使用背景色变量
		border-radius: 12rpx; // 圆角
		// margin: 20rpx 0; // 增加上下边距
	}

	.left,
	.right {
		width: 50%;
		/* 左右各占一半，留出一些间距 */
		padding: 15rpx;
		border-radius: 12rpx;
		/* 圆角 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		/* 轻微阴影 */
		background-color: white;
		/* 白色背景 */
	}

	.right {
		position: relative;
		margin-right: 10rpx;
		overflow: hidden;

		.swiper,
		.bg {
			width: 100%;
			height: 420rpx;
			border-radius: 12rpx;
		}

		image {
			transform: scale(.95);
			transition: all .6s ease;
			border-radius: 12rpx;
		}

		swiper-item.active {
			image {
				transform: scale(1);
			}
		}

		.dots {
			position: absolute;
			bottom: 84rpx;
			left: 50%;
			transform: translate(-50%, 0);
			display: flex;
			flex-direction: row;
			justify-content: center;

			.dot {
				width: 14rpx;
				height: 8rpx;
				transition: all .6s;
				background: rgba(255, 255, 255, 0.5);
				margin-right: 10rpx;
				border-radius: 4rpx;
			}

			.active {
				width: 34rpx;
				height: 8rpx;
				background: $primary-color; // 使用主色调
				border-radius: 4rpx;
			}
		}
	}

	.price-info,
	.new-listings {
		margin-bottom: 20rpx;
		background-color: $bg-color;
		border-radius: 10rpx;
		padding: 15rpx;
	}

	.price-info {
		background-image: url('/static/nav/bj1.png');
		background-size: cover;
	}
	
	.price-info_bule {
		background-image: url('/static/nav/bj3.png');
		background-size: cover;
	}

	.new-listings {
		background-image: url('/static/nav/bj2.png');
		background-size: cover;
	}

	.price-info2 {
		height: 100%;
	}

	.new-listings2 {
		height: auto;
		padding: 10rpx;
		// background-color: rgba(255, 255, 255, 0.8);
		border-radius: 0 0 12rpx 12rpx;
		position: absolute;
		bottom: 88rpx;
		left: 24rpx;
		// right: 0;
	}

	.label {
		font-size: 26rpx;
		color: $subtext-color;
		margin-bottom: 10rpx;
		font-weight: 500;
	}

	.price {
		font-size: 32rpx;
		color: $primary-color;
		font-weight: bold;
	}

	.change {
		font-size: 28rpx;
		color: $light-text-color;
	}

	.change.up {
		// color: $price-clor;
		color: #FFF;
		/* 红色表示上涨 */
	}

	.number {
		font-size: 28rpx;
		color: $primary-color;
		font-weight: bold;
	}

	.card {
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		padding: 20rpx;
	}

	.card-content {
		padding: 14rpx
	}

	.recommend-price {
		color: $text-color;
	}

	.label,
	.price,
	.change {
		display: block;
		margin-bottom: 5rpx;
		font-weight: 600;
	}

	.classify-list {
		white-space: nowrap;
		width: 100%;
		height: 100rpx;
		overflow-x: auto;
		overflow-y: hidden;
		background-color: white;
		transition: all 0.3s ease;
		border-radius: 12rpx;
		margin-top: 20rpx;

		.list {
			position: relative;
			display: inline-block;
			width: 20%;
			height: 100%;
			line-height: 100rpx;
			text-align: center;

			text {
				font-size: 28rpx;
				opacity: 0.8;
				color: $subtext-color;
				transition: all 0.3s ease;
			}

			.line {
				position: absolute;
				left: 50%;
				bottom: 20rpx;
				width: 60%;
				height: 8rpx;
				background: linear-gradient(to right, $primary-color, $secondary-color);
				border-radius: 10rpx;
				transform: translate(-50%, 0);
				opacity: 0;
				transition: opacity 0.3s ease;
			}
		}

		.action {
			text {
				font-size: 32rpx;
				opacity: 1;
				color: $primary-color;
				font-weight: 600;
			}

			.line {
				opacity: 1;
			}
		}
	}

	.banner {
		width: 94%;
		margin: 20rpx 3%;

		image {
			width: 100%;
			height: 20vw;
			border-radius: 12rpx;
			box-shadow: 0 5rpx 25rpx rgba(0, 0, 0, 0.1);
			object-fit: cover;
		}
	}

	.text {
		color: red;
		font-size: 20px;
		font-weight: bold;
	}

	// 新增全局样式
	.fade-in {
		animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	// 新增滚动样式
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	// 优化u-navbar样式
	.u-navbar {
		background-color: white;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	// 优化u-search样式
	.u-search {
		border-radius: 30rpx;
		background-color: $bg-color;
	}

	//菜单导航
	.category-list {
		width: auto;
		margin: auto;
		padding: 0 0 30upx 0;
		border-bottom: solid 2upx #f6f6f6;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.category {
			width: 25%;
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 92rpx;
					height: 92rpx;
				}
			}

			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 28upx;
				color: #3c3c3c;
			}
		}
	}

	.swiper-box {
		height: 320rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 320rpx;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #FFF;
		border-width: 1px;

	}
</style>